
<!--
  表格封装，不懂用
  prop参数说明
      showIndex: 是否显示索引, 默认 true
      loading: 是否显示加载, 默认 false
      showSelect: 是否显示选择框, 默认 false
      showPage:      是否显示页码， 默认 true
      keyString: 索引的key 字段 默认是id 

    // 表头，值和el-table的参数值差不多一样，新增slot以及slotName
    tableColumn： [{
      prop: 'date',        // 显示字段
      label: '日期',       // 字段名
      width: '180',        // 列的宽度
      fixed: 'left',       // 是否固定位置 true left right,值为空或者不存在就不会固定
      slot: true,          // 是否插槽显示，通常用来放一些操作按钮
      slotName: ''     // 如果每一行有多个插槽的方式，那具名插槽将很诱人，，例如在一行中出现单选框、编辑等操作
    }]

    // 表格数据列表
    tableData: []

-->
<template>
  <div class="table--main">
    <el-table
      ref="elTableBox"
      v-loading="loading"
      class="my-el-table"
      :data="tableData"
      border
      element-loading-background="rgba(55,55,55,0.4)"
      element-loading-text="数据正在加载中"
      element-loading-spinner="el-icon-loading"
      style="width: 100%; text-align: center"
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
    >
      <el-table-column v-if="showRadio" label="选项" width="55">
        <template v-slot="scope">
          <input
            type="radio"
            name="my--radio"
            @change="handleRadioChange(scope)"
          />
          <!-- <el-radio name="my-radio"  @change="handleRadioChange(scope)"></el-radio> -->
        </template>
      </el-table-column>
      <el-table-column v-if="showSelect" type="selection" width="55" :reserve-selection="true"/>
      <el-table-column
        v-if="showIndex"
        label="序号"
        type="index"
        width="64px"
      />
      <template v-for="(col, index) in tableColumn">
        <template v-if="!col.slot">
          <el-table-column
            :key="index"
            :fixed="col.fixed"
            :prop="col.prop"
            :label="col.label"
            :width="col.width"
            :sortable="col.sortable"
            align="center"
          />
        </template>
        <template v-else>
          <el-table-column
            :key="index"
            :fixed="col.fixed"
            :label="col.label"
            :width="col.width"
            :sortable="col.sortable"
            align="center"
          >
            <template v-slot="scope">
              <!-- 如果存在slotName，则用具名插槽， 没有则用匿名插槽 -->
              <template v-if="col.slotName">
                <slot :scope="scope" :name="col.slotName" />
              </template>
              <template>
                <slot :scope="scope" />
              </template>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>

    <div v-if="showPage" class="page-box">
      <el-pagination
        :current-page.sync="pageOptions.pageNum"
        :page-sizes="pageOptions.pageSizes"
        :page-size="pageOptions.pageSize"
        :layout="pageOptions.pageLayout"
        :total="pageOptions.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
// import pageOptions from '@/utils/pageOptions'
export default {
  name: "ExTable",
  props: {
    showIndex: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showSelect: {
      type: Boolean,
      default: false,
    },
    showRadio: {
      type: Boolean,
      default: false,
    },
    showPage: {
      type: Boolean,
      default: true,
    },
    keyString: {
      type: String,
      default: 'id',
    },
    tableData: Array,
    tableColumn: Array,
  },
  data() {
    return {
      pageOptions: {
        pageSizes: [20, 50, 100, 200],
        pageSize: 20,
        pageNum: 1,
        total: 0,
        pageLayout: "prev, pager, next, sizes, jumper",
      },
    };
  },
  // created() {
  //   const loading = this.$loading({
  //       lock: true,//同v-loading的修饰符
  //       text: '加载中',//加载文案
  //       backgroundColor: 'rgba(55,55,55,0.4)',//背景色
  //       spinner: 'el-icon-loading',//加载图标
  //       target: document.querySelector(".el-table__body")//loading需要覆盖的DOM节点，默认为body
  //     })
  // },
  methods: {
    // 多选
    handleSelectionChange(value) {
      this.$emit("selectChange", value);
    },
    getRowKeys(row) {
      return row[this.keyString];
    },
    // 单选
    handleRadioChange(scope) {
      this.$emit("radioChange", scope);
    },

    // 切换每页需要显示的条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.$emit("pageSizeChange", val);
    },

    // 切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.$emit("currentPageChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.page-box {
  margin-top: $margin;
}
</style>
